<template>
  <div class="money2">
    <el-card class="cardOut3">
            <div slot="header">
              <div class="headerTitleClass">工资列表</div>
            </div>
     <div class="fath1">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="查询工资">
          <el-input v-model="queryForm.username" placeholder="请输入员工名字进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryEmployee">查询</el-button>
        </el-form-item>
        <div class="gengxinanniu">
          <el-button type="primary"  @click="dialogFormVisible = true">新增工资信息</el-button>

          <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
            <el-form :model="form2">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form2.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="form2.position" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="基本薪资" :label-width="formLabelWidth">
                <el-input v-model="form2.basicsalary" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="奖金" :label-width="formLabelWidth">
                <el-input v-model="form2.jiangjin" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="报销" :label-width="formLabelWidth">
                <el-input v-model="form2.baoxiao" autocomplete="off"></el-input>
              </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取消添加</el-button>
              <el-button type="primary" @click="addInfo1('form2')">确定添加</el-button>
            </div>
          </el-dialog>
        </div>
      </el-form>
     </div>


      <div>
        <el-table
            :data="videoList"
            border
            style="width: 100%">
          <el-table-column
              prop="username"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="position"
              label="职位"
              width="180">
          </el-table-column>
          <el-table-column
              prop="basicsalary"
              label="基本薪资">
          </el-table-column>
          <el-table-column
              prop="jiangjin"
              label="奖金">
          </el-table-column>
          <el-table-column
              prop="baoxiao"
              label="报销">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"

                  @click="handleEdit( scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete( scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

<!--      <div class="dibulan">-->
<!--        <el-pagination-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="pageNum"-->
<!--            :page-sizes="[5, 8, 10, 15]"-->
<!--            :page-size="pageSize"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :total="total">-->
<!--        </el-pagination>-->
<!--      </div>-->
      <div>
        <div>
          <el-dialog title="用户编辑" :visible.sync="updateFormVisible">
            <el-form :model="form">
<!--              <el-form-item label="姓名" :label-width="formLabelWidth">-->
<!--                <el-input v-model="form.username" autocomplete="off"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="form.position" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="基本薪资" :label-width="formLabelWidth">
                <el-input v-model="form.basicsalary" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="奖金" :label-width="formLabelWidth">
                <el-input v-model="form.jiangjin" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="报销" :label-width="formLabelWidth">
                <el-input v-model="form.baoxiao" autocomplete="off"></el-input>
              </el-form-item>


              <!--            <el-form-item label="活动区域" :label-width="formLabelWidth">-->
              <!--              <el-select v-model="form.region" placeholder="请选择活动区域">-->
              <!--                <el-option label="区域一" value="shanghai"></el-option>-->
              <!--                <el-option label="区域二" value="beijing"></el-option>-->
              <!--              </el-select>-->
              <!--            </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateSalary">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<!--@click="handleEdit(scope.$index, scope.row)">编辑</el-button> 第一个是下标-->
<script>
export default {
  name: "money2",
  data(){
    /* 定义初始化变量 */
    return{
      form2:{
        username:'',
        position:'',
        basicsalary: '',
        jiangjin:'',
        baoxiao:''
      },
      pageNum:1,
      pageSize:5,
      formLabelWidth:'90px',
      updateFormVisible:false,
      dialogFormVisible:false,
      form:{
        id:'',
        username:'',
        position:'',
        basicsalary:'',
        jiangjin:'',
        baoxiao:''
      },
      queryForm:{
        username:''
      },
      videoList:[]
    }

  },
  /* 定义事件函数 */
  methods:{
    cancel(){
      this.form2=[]
      this.dialogFormVisible=false
    },
    addInfo1(form2){
      this.$axios.post('/admin/add1',this.form2).then(res=>{
        if(res.data.code ===200){
          this.$message.success("添加成功")
          this.dialogFormVisible=false
          this.form2=[]
          this.queryEmployee()
        }else{
          this.$message.error("添加失败")
        }
      })
    },
    handleDelete(employee){
      this.$axios.delete('/admin/deleteEmployee1/'+employee.id).then(res=>{
        if(res.data.code===200){
          this.$message.success("删除成功")
          this.queryEmployee()
        }
      })
    },
    //修改后确定功能
    updateSalary(){
      this.$axios.post('/admin/updateSalary1',this.form).then(res=>{
        if(res.data.code ===200){
          this.$message.success("修改成功")
          this.updateFormVisible=false
          this.queryEmployee()
        }
      })
    },
    handleEdit(salaryDto){
    this.form={...salaryDto}
    this.updateFormVisible=true
    },
    handleSizeChange(val){
      this.pageSize=val
      this.queryEmployee()
    },
    handleCurrentChange(val){
      this.pageNum=val
      this.queryEmployee()
    },
    queryEmployee(){
      this.$axios.get('/admin/querySalaryDto',{params:{

          username:this.queryForm.username
        }}).then(res=>{
        this.videoList = res.data.data.rows

      })
    }
  },
  /* vue的生命周期函数
     当页面加载完毕就会执行created里面的函数
  */
  created() {
    //名字和admini1中的一样，但是请求地址不一样
    this.queryEmployee()
  }
}
</script>

<!-- scoped此属性可以防止当前页面的样式不会影响其他页面样式 -->
<style scoped>
@import url("Money2.css");
</style>